<template>
	<div class="case-recommend">
		<div class="case-top-menu">
			<div class="case-menu-left">
				<div class="all-check"><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></div>
			</div>

			<div class="case-menu-right">
				<refresh-button @refresh="refreshPage"></refresh-button>
				<div class="case-search-view">
						<el-form inline>
							<el-form-item>
								<el-input class="input-with-select" clearable type="text" placeholder="请输入关键字搜索" v-model="keyword"
								 @keyup.enter.native="init(1)" @clear="refreshPage">
									<el-button slot="append" icon="el-icon-search" @click="init(1)"></el-button>
								</el-input>
							</el-form-item>
						</el-form>
					</div>
			</div>
		</div>
		<div class="case-list">
			<div class="case-item" v-for="(item, index) in caseList" :key="index" >
				<div class="case-checkbox"><el-checkbox v-model="item.checkbox" @change="onChange(item)"></el-checkbox></div>
				<div class="case-content" @click="checkboxClick(item)">
					<ImgPopover style="margin-top: 5px;" :src="item.image_middle"></ImgPopover>
					<div class="text-info">
						<el-tooltip placement="top" effect="light" :content="item.case_name">
							<p class="case-name">案例名称:{{ item.case_name }}</p>
						</el-tooltip>
						<el-tooltip placement="top" effect="light" :content="item.store_name">
							<p class="case-sn">店铺名称:{{ item.store_name }}</p>
						</el-tooltip>
						<p class="add-time">上架时间:{{ item.add_time }}</p>
						<div class="text-bottom">
							<p style="color: #ef8200;">风格:{{ item.style_name }}</p>
							<p style="color: #ef8200;">类型:{{ item.space }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		<div style="padding: 20px 10px;">
			<el-button @click="cancel()">取 消</el-button>
			<el-button type="primary" @click="addFabricClick">确 定</el-button>
		</div>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
export default {
	components: {
		ImgPopover,
	},
	props: {
		layerid: {
			type: String,
			default: ''
		},
		recommend_case:{
			type:String,
			default:""
		},
		store_id:{
			type:String,
			default:""
		}
	},
	data() {
		return {
			selectCaseList : [],
			admin_id: localStorage.getItem('admin_id'),
			checkAll: false,
			total: 0,
			page: 0,
			caseList: [],
			keyword:""
		};
	},
	methods: {
		init(e) {
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				order_by: 'add_time',
				asc: 1,
				keyword: this.keyword,
				store_id:this.store_id
			};
			if (this.admin_id == 3) {
				data.user_id = localStorage.getItem('user_id');
			}
			this.onCountCheck();
			this.$http(this.$ApiList.caseList, data).then(res => {
				this.total = res.datas.count;
				this.caseList = res.datas.data.map(item=>{
					this.$set(item,'checkbox',false);
					return item;
				});
				let checkboxNums = 0;
				this.caseList.forEach((item,index)=>{
					this.selectCaseList.forEach(data=>{
						if(data == item.case_id){
							checkboxNums++;
							this.$set(this.caseList[index],'checkbox',true)
						}
					})
				})
				if(checkboxNums === 10){
					this.checkAll = true;
				}
			});
		},
		addFabricClick() {
			this.onPushItem();
			if (this.selectCaseList.length == 0) {
				this.$layer.msg('至少选择一个案例');
				return;
			}
			this.checkAll = false;
			this.onSetChange();
			this.$parent.setGoodsId(this.selectCaseList.join(','));
			this.$layer.msg('选择成功');
			this.cancel();
		},
		checkboxClick(item){
			if(item.checkbox){
				item.checkbox = false
			}else{
				item.checkbox = true
			}
		},
		refreshPage() {
			this.checkAll = false
			this.page = 1;
			this.init();
		},
		selectType() {
			this.init();
		},
		cancel() {
			this.$layer.close(this.layerid);
		},
		handleCheckAllChange() {
			this.onSetChange();
			if (this.checkAll) {
				this.caseList.forEach(item => {
					item.checkbox = true;
				});
			} else {
				this.caseList.forEach(item => {
					item.checkbox = false;
					this.selectCaseList.forEach((data,index)=>{
						if(data == item.case_id){
							this.selectCaseList.splice(index,1)
						}
					})
				});
			}
		},
		// 去除重复的产品
		onCountCheck(){
			this.onPushItem();
			this.onSetChange();
		},
		onPushItem(){
			this.caseList.forEach(item => {
				if (item.checkbox) {
					this.selectCaseList.push(String(item.case_id));
				}
			});
		},
		onChange(item){
			this.selectCaseList.forEach((data,index)=>{
				if(data == item.case_id){
					this.selectCaseList.splice(index,1);
				}
			})	
		},
		// 去除重复
		onSetChange(){
			if(this.selectCaseList.length){
				this.selectCaseList = Array.from(new Set(this.selectCaseList));
			}
		}
	},
	created() {
		if(this.recommend_case){
			this.selectCaseList = this.recommend_case.split(',');
			this.init();
		}else{
			this.init();
		}
	}
};
</script>
<style lang="scss">
.case-recommend {
	padding: 20px 20px;
	width: 100%;
	.case-top-menu {
		display: flex;
		.case-menu-left {
			flex: 1;
			display: flex;
		}
		.case-menu-right {
			flex: 2;
			display: flex;
			display: flex;
			flex-direction: row-reverse;
		}
		.all-check {
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.client-view {
			margin-right: 10px;
			width: 120px;
		}
	}
	.pages {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.case-list {
		padding: 10px 0;
		display: flex;
		flex-wrap: wrap;
		.case-checkbox {
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}
		.case-item {
				padding: 15px 10px;
				margin-top: 10px;
				margin-right: 10px;
				display: flex;
				width: 370px;
				height: 140px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				border-radius: 4px;
				cursor: pointer;
				box-sizing: border-box;
				.case-content {
					display: flex;
					.img-popover img {
						width: 100px !important;
						height: 100px !important;
					}
				}
		}
		.text-info {
			width: 210px;
			margin-left: 10px;
			.case-name,
			.case-sn {
				line-height: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.add-time{
				line-height: 30px;
			}
		}
		.text-bottom {
			display: flex;
			line-height: 30px;
		}
		.text-bottom p {
			flex: 1;
		}
	}
}
</style>
